---
title: useBoolean
package: "@chakra-ui/hooks"
description:
  "React hook to manage boolean (on - off) states"
---

`useBoolean` is a custom hook used to manage a boolean value with `on`, `off` and `toggle` functions.

## Import

```js
import { useBoolean } from "@chakra-ui/react"
```

## Return value

The `useBoolean` hook returns a stateful boolean value and an object with the following function to update it:

| Name       | Type         |  Description                                                         |
| ---------- | ------------ | -------------------------------------------------------------------------- |
| `on`       | `() => void` | A function to set the boolean value to `true`.   |
| `off`      | `() => void` | A function to set the boolean value to `false`.  |
| `toggle`   | `() => void` | A function to negate the boolean state.          |

## Usage

### Usage of toggle method

```jsx
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <>
      <p>Boolean state: {flag.toString()}</p>
      <button onClick={setFlag.toggle}>
        Click me to toggle the boolean value
      </button>
    </>
  )
}
```

### Usage of on and off methods

```jsx
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <div onMouseEnter={setFlag.on} onMouseLeave={setFlag.off}>
      {flag ? 'The flag is ON!' : 'Hover me to turn ON'}
    </div>
  )
}
```

## Parameters

The hook `useBoolean` accepts the initial boolean value, by default is `false`.
